<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>聊天</title>
    <style type="text/css">
        #show{
            width: 600px;
            height: 300px;
            overflow-y: scroll;
        }
        .my-message{
            background-color: rgba(105, 105, 105, 0.64);
            color: #9e0505;
            width: 200px;
            float: right;
            padding: 10px;
        }
        .other-message{
            background-color: rgba(105, 105, 105, 0.64);
            color: #9e0505;
            width: 200px;
            float: left;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="show"></div>
<div class="panel">
    内容：<textarea id="content"></textarea>
    收信人：<input type="text" id="touser">
    <input type="button" id="send-btn" value="发送">
    <input type="button" id="close-btn" value="关闭">
</div>
<span id="message"></span>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
    var wsServer = 'ws://182.92.120.119:9501';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt) {
        console.log("链接成功");
    };

    websocket.onclose = function (evt) {
        console.log("Disconnected");
    };

    websocket.onmessage = function (evt) {
        console.log('Retrieved data from server: ' + evt.data);
    };

    websocket.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };
    //    var websocket = "ws://182.92.120.119:9501";
    //    //判断当前浏览器是否支持WebSocket
    //    if ('WebSocket' in window) {
    //        websocket = new WebSocket(websocket);
    //    }else {
    //        alert('当前浏览器 Not support websocket')
    //    }

    // //连接发生错误的回调方法
    //    websocket.onerror = function () {
    //        setMessageInnerHTML("WebSocket连接发生错误");
    //    };

    //    //连接成功建立的回调方法
    //    websocket.onopen = function () {
    //        setMessageInnerHTML("WebSocket连接成功");
    //    }

    //    //接收到消息的回调方法
    //    websocket.onmessage = function (event) {
    //        setMessageInnerHTML(event.data);
    //    }

    //    //连接关闭的回调方法
    //    websocket.onclose = function () {
    //        setMessageInnerHTML("WebSocket连接关闭");
    //    }

    //    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    //    window.onbeforeunload = function () {
    //        closeWebSocket();
    //    }

    //    //将消息显示在网页上
    //    function setMessageInnerHTML(innerHTML) {
    //        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    //    }

    //    //关闭WebSocket连接
    //    function closeWebSocket() {
    //        websocket.close();
    //    }

    //    //发送消息
    //    function send() {
    //        var message = document.getElementById('text').value;
    //        websocket.send(message);
    //    }

    // var socket = new WebSocket("wss://hlhis.sxtyyd.com");

    // $("#close-btn").click(function () {
    //     socket.close();
    // })

    // $("#send-btn").click(function () {
    //     var touser = $("#touser").val();
    //     var content = $("#content").val();
    //     var htmlstr = "<div><p class='my-message'>我："+content+"</p></div>";

    //     $("#show").append(htmlstr);
    //     socket.send(content+"@"+touser);
    // })

    // socket.onmessage = function (p1) {
    //     var htmlstr = "<div><p class='other-message'>"+p1.data+"</p></div>";
    //     $("#show").append(htmlstr);
    // }
</script>
</html>